<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" style="border: 1px solid red; padding: 10px;"> 
        <h1>测试具名插槽</h1> 
        <!-- 引入子组件 --> 
        <named-slot> 
            <p style="color:red" slot="header">传给子组件 header 插槽的内容</p> 
            <p style="color:blue" slot="content">传给子组件 content 插槽的内容</p> 
            <p style="color:green" slot="footer">传给子组件 footer 插槽的内容</p> 
        </named-slot> 
    </div> 
         <!-- 子组件模板 --> 
    <template id="named-slot"> 
        <div style="border: 1px solid blue; padding: 10px;"> 
            <slot name="header">头部</slot> 
            <slot name="content">默认内容</slot> 
            <slot name="footer">底部</slot> 
        </div> 
    </template> 
    <script src="js/vue.js"></script> 
    <script> 
        // 创建 Vue 实例，并将父组件注册到 Vue 实例中 
        const app = new Vue({ 
            el: '#app', 
            components: { 
                // 注册子组件 
                'named-slot': { 
                template: '#named-slot', 
            }, 
            } 
        }) 
    </script> 
        
</body>
</html>